<template>
  <view>
    <!-- 标签 -->
    <RecordTags :list="record.violationLabelList" />
    <ve-cell label="违章单关联门店">{{ record.siteName || '-' }}</ve-cell>
    <ve-cell label="违章时间">{{ record.eventTime || '-' }}</ve-cell>
    <ve-cell label="违章城市">{{ record.eventCityName || '-' }}</ve-cell>
    <ve-cell-val label="违章发生方" :value="record.violationPartyName" />
    <ve-cell label="订单渠道">{{ record.orderChannelName || '-' }}</ve-cell>
    <ve-cell label="关联订单号">
      <view v-if="record.orderCode">
        <view v-if="mode == 'order'">{{ record.orderCode }}</view>
        <view v-else class="order_no" @click.stop="toOrder(record)">
          {{ record.orderCode }}
          <ve-icon name="arrow_right_0" size="32"></ve-icon>
        </view>
        <view class="line-ellipsis" v-if="record.giveStaffName" style="width: 400rpx">交车人：{{ record.giveStaffName || '-' }}</view>
        <view>违章押金收取方式：{{ record.violationChargeTypeName || '-' }}</view>
      </view>
      <text v-else>-</text>
    </ve-cell>
    <ve-cell label="承租人信息">
      <template v-if="record.memberName && record.memberPhone"> {{ record.memberName }} | {{ record.memberPhone }} </template>
      <template v-else>-</template>
    </ve-cell>
    <ve-cell-val label="罚分" :value="record.eventScore" unit="分" />
    <ve-cell-price label="罚款" :value="record.eventAmount" />
    <ve-cell-price label="违章代办收入" :value="record.incomeAmount" />
    <ve-cell-price label="代办服务费" :value="record.handleAmount" />
    <ve-cell-price label="违章代办真实成本" :value="record.handleRealCost" />
    <ve-cell-val label="处理方" :value="record.handleTypeName" />
    <ve-cell-val v-if="mode != 'carInfo'" label="违章单号" :value="record.violantionCode" />
    <ve-cell-val label="费用状态" :value="record.violationFeeStateName" />
    <ve-cell-val label="催缴状态" :value="record.urgePayStatusName" />
  </view>
</template>

<script setup>
  import RecordTags from './record-tags.vue'
  import { usePermission } from '@/hooks/usePermission'

  defineProps({
    record: {
      type: Object,
    },
    // 违章列表、order订单详情、carInfo车辆详情
    mode: String,
  })

  const toOrder = (record) => {
    const { eventType, orderId } = record
    if (eventType == 4) {
      if (usePermission('svmsapp:order:short-order.view')) {
        uni.navigateTo({
          url: `/pages/order/short-order/detail/index?id=${orderId}&orderId=${orderId}&bizType=1`,
        })
      }
    } else {
      if (usePermission('svmsapp:order:long-order.view')) {
        uni.navigateTo({
          url: `/pages/order/long-order/detail/index?id=${orderId}&orderId=${orderId}&bizType=2`,
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .order_no {
    display: flex;
    align-items: center;
    color: #3072f6;
    font-weight: 400;
  }
</style>
